<template>
  <div>
    <el-container>
      <el-main>
        <el-card class="box-card">
          <!-- 文章标题模块 -->
          <div slot="header" class="clearfix" style="text-align: center">
            <span style="margin-right:24px; font-size: 24px ">
              文章标题
            </span>
            <el-button
              style="float: left; padding: 3px 0"
              type="text"
              @click="goBack"
              >返回</el-button
            >
          </div>
          <div>
            <el-input v-model="input" :disabled="true" class="input-sty">
              我是文章内容
            </el-input>
          </div>
          <div style="text-align: right">
            <span>
              <el-badge :value="15" class="item">
                <el-button size="small">评论</el-button>
              </el-badge>
              <el-collapse-item title="反馈 Feedback" name="2">
                <div>
                  控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                </div>
                <div>
                  页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
                </div>
              </el-collapse-item>
              <el-badge :value="3" class="item">
                <el-button size="small">阅读人数</el-button>
              </el-badge>

              <el-badge :value="1" class="item" type="primary">
                <el-button size="small">评论</el-button>
              </el-badge>

              <el-badge :value="value" class="item" type="warning">
                <el-button size="small">回复</el-button>
              </el-badge>
            </span>
          </div>
        </el-card>
      </el-main>
      <el-footer style="text-align: right;"> </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      input: "",
    };
  },
  methods: {
    goBack: function() {
      this.$router.push("xinwen");
    },
  },
};
</script>

<style scoped>
.el-input__inner {
  height: 33px;
  font-size: 13px;
  box-shadow: none;
  border: 1px solid blue;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
